<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo elmenu" mode="horizontal" @select="handleSelect">
      <el-menu-item index="pv_count">浏览量(PV)</el-menu-item>
      <el-menu-item index="visitor_count">访客数(UV)</el-menu-item>
      <el-submenu index="ip_count">
        <template slot="title">{{ subtitle }}</template>
        <el-menu-item index="ip_count">
          <span class="aaa">IP 数 </span>
        </el-menu-item>
        <el-menu-item index="bounce_ratio">
          <span class="aaa">跳出率</span>
        </el-menu-item>
        <el-menu-item index="avg_visit_time">平均访问时长</el-menu-item>
        <el-menu-item index="trans_count">转化次数</el-menu-item>
      </el-submenu>
    </el-menu>
    <div ref="lineEchartsBox" v-loading="loading" style="width: 100%; height: 317px;" />
  </div>
</template>

<script>
import semApi from '@/api/baidu'
import * as echarts from 'echarts'
export default {
  props: ['type', 'siteId'],
  data() {
    return {
      loading: false,
      activeIndex: 'pv_count',
      data: [
        {
          name: 'ip_count',
          val: 'IP数'
        },
        {
          name: 'bounce_ratio',
          val: '跳出率'
        },
        {
          name: 'avg_visit_time',
          val: '平均访问时长'
        },
        {
          name: 'trans_count',
          val: '转化次数'
        }
      ],
      subtitle: '其他',
      val: {},
      date: [], // 日期
      value1: [], // 数量
      value2: [],
      datetime: [], // 时间
      timetype: '1',
      site_id: '',
      name: '', // 折线中文名
      name1: '', // 日期时间名
      name2: '',
      interval: ''// X轴间隔
    }
  },
  watch: { // 监听到数据变化以后 重新调用一下callParent
    type(typeval, value) {
    //   this.data = val

      this.timetype = typeval
      //   this.callParent(val)
      this.getQxtData()
    },
    siteId(val, value) {
      this.site_id = val
      this.$nextTick(() => {
        this.getQxtData()
      })
    }
  },
  created() {
    // this.getQxtData()
  },
  methods: {
    handleSelect(key, keyPath) {
      this.data.forEach(ele => {
        if (ele.name == key) {
          this.subtitle = ele.val
          return this.subtitle
        }
      })

      this.val.metrics = key
      this.getQxtData()
    },
    // 获取趋势数据
    getQxtData() {
      const val = {
        type: this.type,
        site_id: this.site_id,
        metrics: this.val.metrics
        // contrast: 1
      }
      //
      this.loading = true
      semApi.qxtList(val).then(res => {
        const data1 = []
        const data2 = []
        const data3 = []
        const data4 = []
        const data5 = []
        const data6 = []
        if (val.type == 3 || val.type == 4) {
          const data = res.data.data
          this.name1 = res.data.name
          this.name2 = ''
          this.name = ''
          data.forEach(el => {
            el.forEach(item => {
              data1.push(item[0])
              data2.push(item[1])
              data3.push(item[2])
            })
            this.date = data1
            this.value1 = data2
            this.value2 = data5
          })
        } else if (val.type == 1 || val.type == 2) {
          const data = res.data.data[0]
          this.name = res.data.name
          this.name1 = res.data.data[0][0][0]
          this.name2 = res.data.data[1][0][0]
          const DATA = res.data.data[1]
          data.forEach(el => {
            data1.push(el[0])
            if (el[1] == '--') {
              data2.push(0)
            } else {
              data2.push(el[1])
            }
            data3.push(el[2])
          })

          DATA.forEach(el => {
            data4.push(el[0])
            if (el[1] == '--') {
              data5.push(0)
            } else {
              data5.push(el[1])
            }
            data6.push(el[2])
          })
          this.date = data3
          this.value1 = data2
          this.value2 = data5
        }

        // this.datetime = data3
        if (this.date.length < 8) {
          this.interval = 0
        } else {
          this.interval = 3
        }
        this.$nextTick(() => {
          this.init()
        })
        this.loading = false
      })
    },

    init() {
      var date = this.date
      var datetime = this.loginlist
      var value1 = this.value1
      var value2 = this.value2

      var name1 = this.name1 + ' ' + this.name
      var name2 = this.name2 + ' ' + this.name
      var interval = this.interval

      var option = {
        title: {
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
            }
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            labelLine: {
              show: true
            }
          }
        },
        toolbox: {
          feature: {// 右上角角标
          }
        },
        legend: {

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true,
          x: 50,
          y: 50,
          x2: 50,
          y2: 60, // （控制表距离上线左右的距离）
          borderWidth: 200
        },
        xAxis: [

          {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: date,
            boundaryGap: false, // 坐标轴两端空白
            axisLabel: { rotate: 60 },
            axisLabel: {
              interval: interval// 坐标轴间隔
            }
          }

        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              // y轴上的y轴线条相关设置
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            axisLine: {
              // Y轴样式
              lineStyle: {
                color: '#eee'
              }
            },
            axisLabel: {
              show: true,
              // Y轴 刻度样式
              textStyle: {
                color: '#000'
              }
            }
          },
          {
            type: 'value',
            axisLine: {
              // Y轴样式
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: name1,
            type: 'line',
            smooth: false, // 设置折线 true为曲线
            symbol: 'circle', // 拐点形状
            symbolSize: 8, // 圆心的大小
            itemStyle: { // 拐点样式
              color: '#4fa8f9'
            },
            lineStyle: { // 折线样式
              // width: 0,
              color: '#4fa8f9'
            },
            showSymbol: true, // 显示拐点
            // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 55.4, 23.0, 16.5, 12.0, 6.2],
            data: value1,
            emphasis: {
              focus: 'series'
            }
          },
          {
            name: name2,
            type: 'line',
            smooth: false, // 设置折线 true为曲线
            symbol: 'circle', // 拐点形状
            symbolSize: 8, // 圆心的大小
            itemStyle: { // 拐点样式
              color: '#b9dcfd'
            },
            lineStyle: {
              // width: 0
              color: '#b9dcfd'
            },
            showSymbol: true, // 显示拐点
            // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 55.4, 23.0, 16.5, 12.0, 6.2],
            data: value2,
            emphasis: {
              focus: 'series'
            }

          }
        ]
      }
      var myEcharts = echarts.init(this.$refs.lineEchartsBox)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style lang='scss'>
.elmenu.el-menu--horizontal>.el-submenu .el-submenu__title{
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    padding: 0 12px;
}
.elmenu.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: none;
}
.elmenu .el-submenu.is-active .el-submenu__title{
    border-bottom: none;
    background-color: #4aa6fc;
    color: #fff;

}

.el-submenu__icon-arrow.el-icon-arrow-down{
        color: #fff;
    }
.elmenu.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
    margin-left: 20px;
}
</style>
<style scoped>

.el-menu.el-menu--horizontal{
    width: 265px;
    border-bottom: none;
    height: 28px;
}
.el-menu.el-menu--horizontal.elmenu{
    display: flex;
    border: solid 1px #eee;
}
.el-menu--horizontal>.el-menu-item{
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 0 12px;
    display: inline;
}

.el-menu--horizontal>.el-menu-item.is-active{
    border-bottom: none;
    background-color: #4aa6fc;
    color: #fff;
}
.el-menu--horizontal>.el-submenu{
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
    line-height: 26px;
    flex-grow: 0;
    width: 93px;

}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: none;
}
.el-submenu.is-active .el-submenu__title{
    border-bottom: none;
}

</style>
